import React from 'react'
import ProgressView from "../../view/ProgressView";
import { Actions, NameSpace } from "../../model/taskModel";
import { connect } from "react-redux";
import styles from "../../css/task.module.css";
import Config from "../../Config";
import DebtView from '../components/DebtView'
import ContactWay from '../components/ContactWay'
import CollectionList from '../components/CollectionList'
import DelayList from '../components/DelayList'

import { getTaskDetail } from '../../service/TaskService'
import { getTOKEN,getIDs,setInfo } from '../../utils/StorageUtil'
class TaskDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedIndex: this.props.taskDetailTabIndex,
      TaskInfo: {},
      locationInfo: {},
      loading: false
    }
  }
  componentDidMount() {
    document.title = '任务详情'    
    this.getTaskDetail()
  }
  // 获取任务详情
  getTaskDetail = (status) => {
    this.setState({ loading: true });
    
    getTaskDetail({
      token: getTOKEN(),
      id: this.props.taskId?this.props.taskId:getIDs().taskId
    })
      .then(
        res => {
    this.setState({ loading: false });
          
          this.setState({
            TaskInfo: res.data
          })
          this.props.setData(res.data)
         setInfo('TaskInfo',res.data)
        }
      )
      .catch(
        err => {
          console.log(err)
        }
      )
  }
  navigate = (e) => {
    this.props.TaskDetailTab(
      { taskDetailTabIndex: e }
    )
    this.setState({
      selectedIndex: e
    })
  }
  // 定位
  getLocation = (e) => {
    this.props.setLocation(e)
  }
  render() {
    return (
      <div className={styles['home']}>
        <Navigator click={this.navigate} selectedIndex={this.state.selectedIndex} />
        {this.state.selectedIndex === 0 &&
          <div style={{ marginTop: '50px' }}>
            <DebtView
              TaskInfo={this.state.TaskInfo}
            />
          </div>

        }
        {this.state.selectedIndex === 1 &&
          <div style={{ marginTop: '50px' }}>
            <ContactWay
              debtorInfo={this.state.TaskInfo.debtor_info}
            />
          </div>
        }
        {this.state.selectedIndex === 2 &&
            <CollectionList isSelf='0'/>
        }
        {this.state.selectedIndex === 3 &&
            <DelayList />
        }
        {/* <GetLocation
          getLocation={this.getLocation}
          visibility={false}
          immediately={true}
        /> */}
          <ProgressView visibility={this.state.loading} mode={ProgressView.MODE_MEDIUM} />        
      </div>
    )
  }

}
const Navigator = ({ click, selectedIndex }) => {
  return (
    <div className={styles['nav_wrapper']}>
      {
        navList.map((item, index) => {
          return (<div
            key={item.name}
            onClick={() => { click(index) }}
            className={styles['nav_item']}
            style={selectedIndex === index ? selectedStyle : {}}
          >
            {item.name}
          </div>)
        })
      }
    </div>
  )
}

const navList = [
  {
    name: '债务信息'
  },
  {
    name: '联系方式'
  },
  {
    name: '催收记录'
  },
  {
    name: '延期记录'
  }
]
const selectedStyle = {
  color: "#fff",
  background: Config.BaseColor
}
const mapStateToProps = state => {
  return {
    ...state[NameSpace]
  };
};
const mapDispatchToProps = dispatch => {
  return {
    setData(data) {
      let params = {
        TaskData: data
      };
      dispatch(Actions.actionTaskData(params));
    },
    setLocation(data) {
      let params = {
        locationData: data
      };
      dispatch(Actions.actionLocationData(params));
    },
    TaskDetailTab(item) {
      let params = {
        taskDetailTabIndex: item.taskDetailTabIndex
      };
      dispatch(Actions.actionTaskDetailTab(params));
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(TaskDetail);
// export default TaskDetail;